<template>
  <el-card shadow="never" class="card_box">
    <el-form ref="formRef" :inline="true" :model="formData" label-position="left" label-width="auto">
      <div class="form_item_box">
        <el-form-item label="时间筛选" class="content_left_item">
          <el-button plain :type="pageType == 1 ? 'primary' : ''" @click="changDateBtn(1)">昨天</el-button>
          <el-button plain :type="pageType == 2 ? 'primary' : ''" @click="changDateBtn(2)">最近7天</el-button>
          <el-button plain :type="pageType == 3 ? 'primary' : ''" @click="changDateBtn(3)">最近30天</el-button>
          <el-button plain :type="pageType == 4 ? 'primary' : ''" @click="changDateBtn(4)">自定义</el-button>
        </el-form-item>
        <el-date-picker v-if="pageType === 4" @change="onTimeChange" v-model="formData.effect_time" type="datetimerange"
          prefix-icon="Calendar" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" range-separator="—" :disabled-date="handleDisabledDate"
          start-placeholder="开始时间" end-placeholder="结束时间" />
        <el-form-item label="活动区域" class="content_left_item">
          <el-select v-model="formData.region_id" class="m-2" placeholder="请选择活动区域" >
            <el-option v-for="item in regionList" :key="item.region_id" :label="item.region_name" :value="item.region_id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="btn_box">
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onClear()">清空</el-button>
          </div>
        </el-form-item>
      </div>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref, defineProps, computed } from 'vue'
import { getDay, DFormat } from '@/utils/utils'
import { getRegionList } from '@/api/customer/groupManage/lbspullgroup'
import { useRoute } from 'vue-router'
const route = useRoute()
const props = defineProps(['info'])
const emit = defineEmits(['secrchsubmit'])
const formData: any = reactive({
  effect_time: [getDay(-6), getDay(0, true)], //创建时间
  region_id: ''
})
let pageType = ref(2)
const onSubmit = () => {
  emit('secrchsubmit', formData)
}
const onTimeChange = (v: any) => {
  !!v || (formData.effect_time = [])
}
const changDateBtn = (v: any) => {
  pageType.value = v

  switch (v) {
    case 1:
      formData.effect_time = [getDay(-1), getDay(-1, true)]
      break
    case 2:
      formData.effect_time = [getDay(-6), getDay(0, true)]
      break
    case 3:
      formData.effect_time = [getDay(-29), getDay(0, true)]
      break
    case 4:
      const { activity_time, real_begin_date, real_end_date, created_at } = props.info
      const realtime = [real_begin_date, real_end_date]
      formData.effect_time = props.info.period_type === 1 ? [created_at, getDay(0, true)] : real_begin_date && real_end_date ? realtime : activity_time
      break
  }
  onSubmit()
}

const regionList = reactive<Array<any>>([])
const onGetRegionList = async () => {
  const res = await getRegionList({ id: route.query.id })
  console.log('res: ', res);
  if (Array.isArray(res.url)) {
    regionList.splice(0, regionList.length, ...res.url)
  }
}
onGetRegionList()
const dayTime = (1000 * 60 * 60 * 24)
const handleDisabledDate = (date: any) => {
  const { activity_time, period_type, created_at, real_begin_date, real_end_date } = props.info
  const nowDate = +new Date(date)
  if (period_type === 1) {
    return nowDate < +new Date(created_at) - dayTime
  }
  let [startDate, endDate] = activity_time || []
  console.log()
  startDate = DFormat(+new Date(real_begin_date ?? startDate), 'yyyy-MM-dd 00:00:00')
  endDate = DFormat(+new Date(real_end_date ?? endDate), 'yyyy-MM-dd 00:00:00')
  return nowDate < +new Date(startDate) || nowDate > +new Date(endDate)
}

const onClear = () => {
  formData.effect_time = [getDay(-6), getDay(0, true)]
  pageType.value = 2
  formData.region_id = ''
  onSubmit()
}
</script>

<style lang="scss" scoped>
.el-radio {
  margin-right: 0;

  :deep(.el-radio__input) {
    display: none;
  }

  &:hover {
    color: #ff6b00;
    border-color: #ff6b00;
  }
}

.card_box {
  margin-bottom: 16px;
}

.form_item_box {
  display: flex;
  flex-wrap: wrap;
  // grid-template-columns: 375px 400px 300px 1fr;
  grid-gap: 20px;

  .el-form-item {
    margin-bottom: 0;
  }
}

.btn_box {
  text-align: right;
}
</style>
